<template>
  <div>
   <div :class="className">123</div>
   <div class="box red">123</div>
   <div :class="{box: true,red:isRed,green: !isRed }">123</div>
   <button @click="changeFn">更改颜色</button>
  </div>
</template>

<script>
export default {
   data(){
      return{
         className: 'red',
         isRed: true,
      }
   },
   methods: {
      changeFn(){
         this.className = this.className === 'green' ? 'red' : 'green'
         this.isRed = !this.isRed
      }
   }
}

</script>

<style>
.box {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 1px solid #000;
   text-align: center;
}
.red {
   color: red;
}
.green {
   color: green;
}
</style>